<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>上传商品</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        form {
            width: 500px;
            border: 1px solid rgba(0, 0, 0, 0.7);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            margin: 100px auto;
        }

        form > div {
            margin: 15px 0;
            padding: 0 50px;
        }

        input[type='text'] {
            width: 300px;
            height: 30px;
        }

        .categary {
            width: 300px;
            height: 30px;
        }

        input[type='radio'] {
            margin: 0 10px;
        }

        input[type='submit'],
        input[type='button'] {
            width: 100px;
            height: 30px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            color: white;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 5px;
        }

        form > div:last-child {
            text-align: right;
        }

        #photo1 {
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin-left: 20px;
        }

        #photo2 {
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin-left: 20px;
        }

        #photo3 {
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin-left: 20px;
        }

        /*隐藏   上传按钮*/

        #file1 {
            display: none;
        }

        #file2 {
            display: none;
        }

        #file3 {
            display: none;
        }

        #file4 {
            display: none;
        }

        #Mybutton {

        }


    </style>
</head>

<body>
<!--在文件上传时form表单的数据传输方式必须为post，并且编码格式必须为multipart/form-data，否则服务器端是无法获取传输的文件数据-->
<form id="uploadForm" enctype="multipart/form-data">
    <div style="height: 30px;text-align: center">
        {% if msg %}
            <p style="color:red;">
                {{ msg }}
            </p>
        {% endif %}
    </div>

    <div>
        图片:
        <label for="file1">
            <img src="/static/image/default1.jpeg" id="photo1">
        </label>
        <input type="file" id="file1" name="file1" multiple>
        <input type="hidden" id="file11" name="file11" >
        <label for="file2">
            <img src="/static/image/default1.jpeg" id="photo2">
        </label>
        <input type="file" id="file2" name="file2" multiple>
        <input type="hidden" id="file22" name="file22" >

        <label for="file3">
            <img src="/static/image/default1.jpeg" id="photo3">
        </label>
        <input type="file" id="file3" name="file3" multiple>
        <input type="hidden" id="file33" name="file33" >
    </div>

    <div>
        商品视频:
        <label for="file4">
            <img src="/static/image/default1.jpeg" style="width: 180px;height: 40px" id="photo">
        </label>
        <input type="file" id="file4" name="file4">

    </div>
    <div>
        <label>名称:</label>
        <input type="text" id="name" name="itemname" >
    </div>
    <div>
        <label>价格:</label>
        <input type="text" id="price" name="price">
    </div>
    <div>
        <label>描述:</label>
        <input type="text" id="detail" name="detail">
    </div>
    <div>
        <label>成色:</label>
        <select name="condition" class="categary">
            <option value="全新">全新</option>
            <option value="9成新">9成新</option>
            <option value="8成新">8成新</option>
            <option value="7成新">7成新</option>
            <option value="其他">其他</option>
        </select>
    </div>

    <div>
        <label>数量:</label>
        <input type="text" name="count">
    </div>
    <div>
        <label>类别:</label>
        <select name="categary" class="categary">
            <option value="手机">手机</option>
            <option value="电脑平板">电脑平板</option>
            <option value="服饰鞋包">服饰鞋包</option>
            <option value="二手书籍">二手书籍</option>
            <option value="家居家电">家居家电</option>
            <option value="生活百货">生活百货</option>
            <option value="健身器材">健身器材</option>
            <option value="智能硬件">智能硬件</option>
            <option value="其他">其他</option>
        </select>
    </div>

    <div>
        <label>配置:</label>
        <input type="text" id="config" name="config">
    </div>
    <div>
        <input type="button" value="提交" onclick="uploadFile()">
        <input type="button" value="扫码上传" onclick="codeUpload()">
    </div>
</form>
</body>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function uploadFile() {
        var formData = new FormData($("#uploadForm")[0]);
        console.log(formData);
        // 进行文件数据的上传
        $.ajax({
            async: false,
            cache: false,
            url: '/user/uploadItem/',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.Code == 200) {
                    var urls = result.pic;
                    document.getElementById("photo1").src = urls[0];
                    document.getElementById("photo2").src = urls[1];
                    document.getElementById("photo3").src = urls[2];
                    alert('上传成功！');
                }
                ;
                if (result.Code == 500) {
                    alert(result.msg);
                }
                ;
            },
        });
    }

    //扫码上传商品
    function codeUpload() {
        // 扫码上传上传
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/user/codeUpload/",
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {
                    if(result.Categray=="ISBN")
                    {
                        document.getElementById("name").value=result.title;
                        document.getElementById("price").value=result.price;
                         document.getElementById("detail").value=result.summary;
                        if(result.img1!="")
                        {
                            document.getElementById("photo1").src=result.img1;
                            document.getElementById("file11").value=result.img1;

                        }
                        if(result.img2!="")
                        {
                            document.getElementById("photo2").src=result.img2;
                             document.getElementById("photo3").src=result.img2;
                            document.getElementById("file22").value=result.img2;
                            document.getElementById("file33").value=result.img2;
                        }
                    }
                    if(result.Categray=="goods")
                    {
                        document.getElementById("name").value=result.goodName;
                        document.getElementById("price").value=result.price;
                        if(result.img!="")
                        {
                            document.getElementById("photo1").src=result.img;
                        }
                    }
                };
                if (result.Code == 500) {
                    alert(result.msg);
                };
            },
        });
    }

    //上传之前预览图片1
    $('#file1').on('change', function () {
            var filePath = $(this).val(), //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            src = window.URL.createObjectURL(this.files[0]); //通过文件的URL创建可以在本地预览的格式

        // 通过文件格式检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
            return;
        }

        $('#photo1').attr('src', src);
    });

    //2
    $('#file2').on('change', function () {
        var filePath = $(this).val(), //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

        // 检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
            return;
        }

        $('#photo2').attr('src', src);
    });

    //3
    $('#file3').on('change', function () {
        var filePath = $(this).val(), //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

        // 检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
            return;
        }
        $('#photo3').attr('src', src);
    });

</script>
</html>